<template>
    <div class="goods">
        <div class="wrap">
            <Crumb></Crumb>
            <img src="../assets/img/banner.4c6b6225.png" width="100%" alt="" />
            <ul class="options">
                <li>
                    <strong>排序：</strong>
                    <span
                        :class="{ active: index == options1Num }"
                        v-for="(item, index) in options1"
                        :key="index"
                        @click="options1Fn(index, item.min, item.max)"
                    >
                        {{ item.txt }}
                    </span>
                    <!-- <span>我还可以兑换</span>
                    <span>0-500个</span>
                    <span>500-1000个</span>
                    <span>1000-1500个</span>
                    <span>1500-2500个</span> -->
                </li>
                <li>
                    <strong>分类：</strong>
                    <span
                        :class="{ active: item.isActive }"
                        v-for="(item, index) in options2"
                        :key="index"
                        @click="options2Fn(index, item.type)"
                    >
                        {{ item.txt }}
                    </span>
                    <!-- <span>实物礼品</span>
                    <span>虚拟礼品</span> -->
                </li>
            </ul>
            <List :arr="goodslistshow" />
            <div style="text-align: center">
                {{ isReachBottom ? '已经没有数据了' : '正在加载中...' }}
            </div>
        </div>
    </div>
</template>
<script>
import Crumb from '../components/Crumb.vue';
import List from '../components/home/List.vue';
import { GoodsSearchsAPI } from '@/request/api';
import { getScrollTop, getClientHeight, getScrollHeight } from '@/utils/index';

export default {
    data() {
        return {
            did: 0,
            type: 0,
            min: 0,
            max: 0,
            keyword: '',
            page: 1,
            isloading: false,
            size: 8,
            isReachBottom: false,
            goodslist: [],
            goodslistshow: [],
            // 排序的数组项
            options1: [
                { min: 0, max: 10000, txt: '全部' },
                // "我还可以兑换"的max值是Header组件的coin值
                { min: 0, max: 0, txt: '我还可以兑换' },
                { min: 0, max: 500, txt: '0-500分' },
                { min: 500, max: 1000, txt: '500-1000分' },
                { min: 1000, max: 1500, txt: '1000-1500分' },
                { min: 1500, max: 2500, txt: '1500-2500分' },
                { min: 2500, max: 6500, txt: '2500-6500分' },
                { min: 6500, max: 10000, txt: '6500-10000分' },
            ],
            options1Num: 0,

            // 分类数组项
            options2: [
                { type: 0, txt: '全部', isActive: true },
                { type: 1, txt: '实体商品', isActive: false },
                { type: 2, txt: '虚拟商品', isActive: false },
            ],
            // options2Num: 0,
        };
    },

    components: {
        Crumb,
        List,
    },
    watch: {
        '$route.query.keyword': {
            handler(newVal, oldVal) {
                if (oldVal != newVal) {
                    console.log(oldVal);
                    console.log(newVal);
                    this.keyword = newVal;
                    // console.log(this.keyword);
                    this.goodsSearch();
                }
            },
        },
    },
    async created() {
        // 初始页面更新

        this.keyword = this.$route.query.keyword || '';
        // console.log(this.keyword);
        this.goodsSearch();
    },
    mounted() {
        console.log('添加');
        window.addEventListener('scroll', this.scrollFn);
    },
    beforeDestroy() {
        console.log('取消');
        window.removeEventListener('scroll', this.scrollFn);
    },
    methods: {
        //函数封装
        async goodsSearch() {
            let res = await GoodsSearchsAPI({
                did: this.did,
                type: this.type,
                min: this.min,
                max: this.max,
                keyword: this.keyword,
            });
            this.goodslist = res.data;
            this.goodslistshow = this.goodslist.filter((item, index) => index < 8);

            //页面没有刷新，可能会导致page++，初始化page
            this.page = 1;
            this.isReachBottom = false;

            //如果没有查询到数据，goodslist=0
            if (this.goodslistshow.length >= this.goodslist.length) {
                this.isReachBottom = true;
            }
        },
        options1Fn(index, min, max) {
            this.options1Num = index;
            this.min = min;
            this.max = max;
            this.goodsSearch();
        },
        options2Fn(index, type) {
            this.options2.forEach(item => {
                item.isActive = false;
            });
            this.options2[index].isActive = true;
            this.type = type;
            this.goodsSearch();
        },
        scrollFn() {
            //**4.如果此时两个数组的长度是一样的，就代表数据已经全部渲染在页面了
            if (this.goodslistshow.length == this.goodslist.length) {
                this.isReachBottom = true;
                return;
            }
            // console.log('执行了scroll');

            //**3.节流：通过一个变量的控制，让一段代码在一段时间内不会重复执行
            if (this.isloading == false) {
                //**2.滑动过快，会频繁的进行循环，此时使用定时器惊醒解决
                setTimeout(() => {
                    this.isloading = true;
                    //***1-1条件判断
                    if (getScrollTop() + getClientHeight() >= getScrollHeight() - 20) {
                        console.log('开始加载');

                        this.page++;

                        for (var i = this.size * (this.page - 1); i < this.size * this.page; i++) {
                            //**1-2.往goodslistshow里面追加8条数据
                            this.goodslist[i] && this.goodslistshow.push(this.goodslist[i]);
                            console.log(this.page, this.goodslist[i]);
                        }
                    }
                    this.isloading = false;
                }, 500);
            }
        },
    },
};
</script>

<style lang="less" scoped>
@import '../assets/css/public.less';

.goods {
    padding-bottom: 50px;
    background: #efefef;
    padding-top: 20px;
    .options {
        padding-top: 20px;
        padding-bottom: 40px;
        li {
            margin-top: 20px;
            strong {
                color: #000;
                font-weight: bold;
            }
            span {
                margin-right: 20px;
                margin-left: 10px;
                cursor: pointer;
                color: #999;
                &.active {
                    color: @base-color;
                    font-weight: bold;
                }
            }
        }
    }
}
</style>
